<!-- 雷达图表2 -->

  <template>
    <div class="chart-container">
      <div ref="chart" class="chart"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    props: {
      list: {
        type: Array,
        required: true
      }
    },
    watch: {
    list: {
      handler() {
        this.renderChart();
      },
      deep: true
    }
  },
    mounted() {
      this.renderChart();
    },
    methods: {
      renderChart() {
        const chartDom = this.$refs.chart;
        const myChart = echarts.init(chartDom);
        const option = this.generateOption();
        myChart.setOption(option);
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      },
      generateOption() {
        const lineStyle = {
          width: 1,
          opacity: 0.5
        };
        const indicator = this.list.map((item) => {
          return {
            name: item.name,
            max: Math.max(
              item.averageTripDistance,
              item.passengerRating,
              item.averageFare,
              item.driverRating,
              item.peakHourOrderCount,
              item.nighttimeOrderCount
            )
          };
        });
  
        const seriesData = this.list.map((item) => {
          return Object.values(item).slice(0, -1);
        });
        console.log('radar: ', this.list, seriesData)
  
        const option = {
          backgroundColor: '#161627',
          title: {
            text: 'AQI - Radar',
            left: 'center',
            textStyle: {
              color: '#eee'
            }
          },
          legend: {
            bottom: 5,
            data: this.list.map((item) => item.name),
            itemGap: 20,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            selectedMode: 'single'
          },
          radar: {
            indicator: indicator,
            shape: 'circle',
            splitNumber: 5,
            axisName: {
              color: 'rgb(238, 197, 102)'
            },
            splitLine: {
              lineStyle: {
                color: [
                  'rgba(238, 197, 102, 0.1)',
                  'rgba(238, 197, 102, 0.2)',
                  'rgba(238, 197, 102, 0.4)',
                  'rgba(238, 197, 102, 0.6)',
                  'rgba(238, 197, 102, 0.8)',
                  'rgba(238, 197, 102, 1)'
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(238, 197, 102, 0.5)'
              }
            }
          },
          series: [
            {
              name: this.list.map((item) => item.name),
              type: 'radar',
              lineStyle: lineStyle,
              data: seriesData,
              symbol: 'none',
              itemStyle: {
                color: '#B3E4A1'
              },
              areaStyle: {
                opacity: 0.05
              }
            }
          ]
        };
  
        return option;
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .chart-container {
    width: 600px;
    margin: 10px;
    padding:10px;
    display: inline-flex;
  }
  
  .chart {
    width: 500px;
    height: 400px;
    display: inline-flex; /* 或者使用 inline-flex inline-block*/
    box-sizing: border-box;
  }
  </style>